<template>
    <view class="container">
        <view class="search-box">
            <up-input placeholder="请输入..." border="surround" clearable prefixIcon="search" shape="square"
                customStyle="background-color: #f6f6f6;flex: 1;padding: 0 20rpx;height: 60rpx;"
                placeholderStyle="color: #888;font-size: 28rpx;" v-model="keyword">
                <template #prefix>
                    <view class="search-type">
                        <up-select v-model:current="type" :label="keyType" :options="typeArr"
                            iconSize="24rpx"></up-select>
                    </view>
                </template>
            </up-input>
            <button class="search-btn" @click="getSearchData">搜索</button>
        </view>


        <view class="list" v-if="list.length > 0">
            <view class="list-item" v-for="item in list" :key="item.id">
                <view class="item">
                    <view>用户名</view>
                    <view>{{ item.customerName || '--' }}</view>
                </view>
                <view class="item">
                    <view>手机号码</view>
                    <view>{{ item.mobile || '--' }}</view>
                </view>
                <view class="item">
                    <view>身份证</view>
                    <view>{{ item.idcard || '--' }}</view>
                </view>
                <view class="reason" v-if="item.reason">
                    {{ item.reason }}
                </view>
            </view>
        </view>
        <view class="empty" v-if="list.length === 0 && !loading">
            <up-empty mode="search"></up-empty>
        </view>
    </view>

</template>

<script setup>
import { ref, computed } from 'vue';
import { blacklistApi } from '@/api/blacklist';
import { debounce } from 'lodash';
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

onShareAppMessage(() => {
  return {
    title: '万选回收',
    path: '/pages/subPages/blacklist'
  }
})

onShareTimeline(() => {
  return {
    title: '万选回收',
  }
})
const typeArr = ref([
    {
        name: '用户名',
        id: 1,
        key: 'customerName'
    },
    {
        name: '手机号',
        id: 2,
        key: 'mobile'
    },
    {
        name: '身份证',
        id: 3,
        key: 'idcard'
    }
]);
const keyword = ref('');
const type = ref(1);
const keyType = computed(() => {
    return typeArr.value.find(item => item.id === type.value)?.name
})
const keyTypeKey = computed(() => {
    return typeArr.value.find(item => item.id === type.value)?.key
})
const list = ref([]);
const loading = ref(true);
const getSearchData = debounce(() => {
    if (!keyword.value) {
        return;
    }
    uni.showLoading({
        title: '加载中...'
    })
    loading.value = true;
    blacklistApi.getBlacklistList({
        [keyTypeKey.value]: keyword.value
    }).then(res => {
        list.value = res.data;
    }).finally(() => {
        loading.value = false;
        uni.hideLoading();
    })
}, 500)



</script>

<style scoped lang="scss">
@import '@/index.scss';

.container {

    .search-box {
        display: flex;
        align-items: center;
        padding: 24rpx;
        gap: 20rpx;
        background-color: #fff;

        .search-type {
            max-width: 130rpx;
            font-size: 28rpx;
            color: #333;
            margin-right: 10rpx;
        }

        .search-btn {
            width: 120rpx;
            height: 60rpx;
            background: $primary;
            color: #fff;
            border-radius: 10rpx;
            font-size: 26rpx;
            text-align: center;
            line-height: 60rpx;
        }
    }

    .list {
        padding: 24rpx;

        .list-item {
            padding: 24rpx;
            background-color: #fff;
            border-radius: 10rpx;
            margin-bottom: 20rpx;



            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 26rpx;
                color: #333;
                margin-bottom: 10rpx;
                padding: 10rpx 0;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            .reason {
                font-size: 24rpx;
                color: #666;
                margin-top: 10rpx;
                padding: 10rpx;
                line-height: 32rpx;
                display: flex;
                align-items: flex-start;

                &::before {
                    content: '';
                    display: inline-block;
                    width: 12rpx;
                    height: 32rpx;
                    background: $primary;
                    border-radius: 6rpx;
                    margin-right: 12rpx;
                }
            }
        }
    }

    .empty {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
